<template>
  <div class="form-container">
    <el-row>
      <el-col :span="span" v-for="(item, index) in form" :key="index">
        <search-label :labelName="item.label">
          <VNode
            :parentThis="this"
            :content="item"
            :isEscapeFn="true"
            v-model="item.value"
            @updateOptions="updateOptions(item, index)"
          />
        </search-label>
      </el-col>
    </el-row>
    <template v-if="isShowBottomBtn">
      <div class="form-bottom-box">
        <el-button @click="resetForm">重置</el-button>
        <el-button type="primary" @click="submitForm">
          {{ formSaveBtn }}
        </el-button>
      </div>
    </template>
  </div>
</template>

<script>
import VNode from "./vnodeComponent";
import { cloneDeep } from "lodash";

export default {
  components: {
    VNode,
  },
  props: {
    span: {
      type: Number,
      default: 8,
    },
    form: {
      type: Object,
      default: () => {
        return {};
      },
    },
    isShowBottomBtn: {
      type: Boolean,
      default: true,
    },
    formSaveBtn: {
      type: String,
      default: "查询",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    labelWidth: {
      type: String,
      default: "auto",
    },
  },
  data() {
    return {
      originalData: "",
    };
  },
  mounted() {
    this.originalData = cloneDeep(this.form);
  },
  watch: {},
  methods: {
    resetForm() {
      this.form.forEach((item, index) => {
        item.value = this.originalData[index].value;
      });
    },
    async submitForm() {
      let checkForm = false;
      let from = {};
      for (let i = 0; i < this.form.length; i++) {
        if (
          this.form[i].rule &&
          this.form[i].rule.isRequire &&
          (this.form[i].value === null ||
            this.form[i].value === undefined ||
            this.form[i].value === "")
        ) {
          this.$message(this.form[i].rule.errorMessage);
          checkForm = true;
          break;
        }
        from[this.form[i].valueName] = this.form[i].value;
      }
      if (checkForm) {
        return;
      }
      this.$emit("success", from);
    },
    updateOptions(item, index) {
      const { propsData = {}, options = [] } = item;
      const { customValue = "value", customLabel = "label" } = propsData;
      const targetItem = originalData[index];
      // 改变options后，判断是否能匹配到value,否则重置value
      const targetOptions = options.find(
        (ele) => ele[customValue] === item.value
      );
      if (!targetOptions) {
        item.value = targetItem.value;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.form-container {
  :deep(.el-select) {
    flex: 1;
  }
  :deep(.el-col) {
    padding-right: 20px;
  }
  .form-bottom-box {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
}
</style>
